<template>
  <div>
    <back title="地图"></back>
    <foot :active="4" />
    <van-tabs style="margin-top:-10px">
      <van-tab title="网点注册">
        <div class="map">
          <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
          <el-amap class="map-box" vid="amap1" :plugin="plugin" :center="center" :zooms="zooms">
            <el-amap-text :text="text" :offset="offset" :position="center" v-if="isText"></el-amap-text>
            <el-amap-marker :position="center" v-if="isMaker"></el-amap-marker>
          </el-amap>
        </div>
        <van-field label="网点名称" v-model="form.name" placeholder="请输入" />
        <van-field label="网点地址" v-model="form.addr" placeholder="请输入" />
        <van-button type="info" block>提交注册</van-button>
      </van-tab>
      <van-tab v-for="item in list" :key="item.text" :title="item.text">
        <component :is="item.route"></component>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import VueAMap from 'vue-amap'

Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: 'f89f00d0e53c4186f4b8ee14f2b9d30c',
  plugin: ['Geolocation'],
  v: '1.4.4'
});
export default {
  name: "dragPage",
  data(){
    let self = this;
    return{
      list: [
        {text: '网点审核', route: () => import('./Clock/Review.vue')},
        {text: '打卡',  route: () => import('./Clock/Clock')}
      ],
      center: [121.59996, 31.197646],
      zooms: [14, 19],
      text: '我的位置',
      offset: [0, 20],
      isText: false,
      isMaker: false,
      plugin: [{
        pName: 'Geolocation',
        events: {
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              if (result && result.position) {
                console.log(result);
                let lng = result.position.lng;
                let lat = result.position.lat;
                self.center = [lng, lat];
                self.isText = true;
                self.searchOption.city = result.addressComponent.city
                self.$nextTick();
              } else {
                AMap.plugin("AMap.CitySearch", () => {
                  var citySearch = new AMap.CitySearch();
                  citySearch.getLocalCity((status, result) => {
                    if (status === "complete" && result.info === "OK") {
                      // 查询成功，result即为当前所在城市信息
                      console.log(result)
                      self.center = [result.bounds.Gb.lng - 0.10564, result.bounds.Gb.lat - 0.06807]
                      self.isText = true
                      self.searchOption.city = result.city
                      self.isMaker = true
                      self.offset = [0, 15]
                    }
                  });
                });
              }
            });
          }
        }
      }],
      searchOption: {
        city: '上海',
        citylimit: false
      },
      form: {
        name: '',
        addr: ''
      }
    }
  },
  methods: {
    onSearchResult (pois) {
      console.log(pois);
      this.form.name = pois[0].name
      this.form.addr = pois[0].address
      let latSum = 0;
      let lngSum = 0;
      
      if (pois.length > 0) {
        pois.forEach(poi => {
          let {lng, lat} = poi;
          lngSum += lng;
          latSum += lat;
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.center = [center.lng, center.lat];
        this.isText = false;
      }
    }
  }
}
</script>
<style lang="less">
  .map{
    position: relative;
    margin-top: 1px;
    .map-box{
      width: 100%;
      height: 300px;
      .amap-overlay-text-container{
        color: #1989fa;
        padding: 4px;
        margin-top: 5px;
      }
    }
    .search-box {
      position: absolute;
      top: 15px;
      left: 4%;
      width: 91%;
      height: 35px;
      z-index: 10000;
    }
  }
</style>